@extends('layouts.default')

@section('title', '直播课表')

@push('scripts')
<script type="text/javascript" src="{{ asset('lib/fullcalendar-6.1.5/dist/index.global.js')}}"></script>
<script>
    layui.use(['layer','form','table','laydate','laypage'], function() {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table,
            laydate = layui.laydate,
            laypage = layui.laypage;

        pageInit();

        function pageInit(eventData,nowtime) {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                locale: 'zh-cn', // 设置中文
                displayEventEnd: true, // 显示结束时间
                buttonIcons: false, // show the prev/next text
                initialDate: nowtime,
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
                },
                initialDate: '2023-01-12',
                navLinks: true, // can click day/week names to navigate views
                businessHours: true, // display business hours
                editable: true,
                selectable: true,
                events: [
                    {
                        title: 'Business Lunch',
                        start: '2023-01-03T13:00:00',
                        constraint: 'businessHours'
                    },
                    {
                        title: 'Meeting',
                        start: '2023-01-13T11:00:00',
                        constraint: 'availableForMeeting', // defined below
                        color: '#257e4a'
                    },
                    {
                        title: 'Conference',
                        start: '2023-01-18',
                        end: '2023-01-20'
                    },
                    {
                        title: 'Party',
                        start: '2023-01-29T20:00:00'
                    },
                    // areas where "Meeting" must be dropped
                    {
                        groupId: 'availableForMeeting',
                        start: '2023-01-11T10:00:00',
                        end: '2023-01-11T16:00:00',
                        display: 'background'
                    },
                    {
                        groupId: 'availableForMeeting',
                        start: '2023-01-13T10:00:00',
                        end: '2023-01-13T16:00:00',
                        display: 'background'
                    },
                    // red areas where no events can be dropped
                    {
                        start: '2023-01-24',
                        end: '2023-01-28',
                        overlap: false,
                        display: 'background',
                        color: '#ff9f89'
                    },
                    {
                        start: '2023-01-06',
                        end: '2023-01-08',
                        overlap: false,
                        display: 'background',
                        color: '#ff9f89'
                    }
                ]
            });

            calendar.render();
        }
    });
</script>
@endpush

@section('content')
<style>
#calendar {
    max-width: 1100px;
    margin: 0 auto;
}
</style>


<div class="layui-card">
    <div class="layui-card-body">
        
        <div id='calendar'></div>

    </div>
</div>

@endsection